<template>
  <aside v-if="asideShow">
    <form>
      <div class="form-group form-group-sm mb-2">
        <label class="form-label fs-6">间隔 <code>[0:100]</code></label>
        <div class="input-group input-group-sm">
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.gap"
            min="0"
            max="100"
            step="1"
          />
          <span class="input-group-text" id="basic-addon1"> px </span>
        </div>
      </div>
      <div class="form-group form-group-sm mb-2">
        <label class="form-label fs-6">每个元素的最小宽度 <code>[100:600]</code></label>
        <div class="input-group input-group-sm">
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.itemMinWidth"
            min="100"
            max="600"
            step="1"
          />
          <span class="input-group-text" id="basic-addon1">px</span>
        </div>
      </div>
      <div class="form-group form-group-sm mb-2">
        <label class="form-label fs-6">距离底部多少加载更多 <code>[0:10000]</code></label>
        <div class="input-group input-group-sm">
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.bottomDistance"
            min="0"
            max="1000"
            step="1"
          />
          <span class="input-group-text" id="basic-addon1">px</span>
        </div>
      </div>
      <div class="form-group form-group-sm mb-2">
        <label class="form-label fs-6"
          >最小列数 <code>[0:{{ waterfallOption.maxColumnCount }}]</code>，最大列数
          <code>[{{ waterfallOption.minColumnCount }}:10]</code></label
        >
        <div class="input-group input-group-sm">
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.minColumnCount"
            min="0"
            :max="waterfallOption.maxColumnCount"
            step="1"
          />
          <span class="input-group-text" id="basic-addon1">列</span>
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.maxColumnCount"
            :min="waterfallOption.minColumnCount"
            max="10"
            step="1"
          />
          <span class="input-group-text" id="basic-addon1">列</span>
        </div>
      </div>
      <div class="form-group form-group-sm mb-2">
        <label class="form-label fs-6">(顶部/底部)预加载屏 <code>[0:5]</code></label>
        <div class="input-group input-group-sm">
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.topPreloadScreenCount"
            min="0"
            max="5"
            step="1"
          />
          <input
            type="number"
            class="form-control"
            v-model="waterfallOption.bottomPreloadScreenCount"
            min="0"
            max="5"
            step="1"
          />
        </div>
      </div>
      <div class="form-group form-group-sm form-check form-switch mb-1">
        <label class="form-label fs-6">开启虚拟列表</label>
        <input class="form-check-input" type="checkbox" v-model="waterfallOption.virtual" />
      </div>
      <div class="form-group form-group-sm form-check form-switch mb-2">
        <label class="form-label fs-6">仅展示图片</label>
        <input class="form-check-input" type="checkbox" v-model="waterfallOption.onlyImage" />
      </div>
      <div class="form-group form-group-sm mb-2">
        <label class="form-label fs-6">数据展示</label>
        <p>每页条数: {{ data.size }}</p>
        <p>当前页码: {{ data.page }}</p>
        <p>已加载量: {{ data.list.length }} / {{ data.total }}</p>
        <p>等待加载: {{ waterfallOption.loading }}</p>
      </div>
      <button type="button" class="btn btn-primary btn-sm" @click="backTop">回到顶部</button>
    </form>
  </aside>
</template>

<script setup lang="ts">
import useApp from './useApp'
defineProps<{
  data:Record<string,any>,
    waterfallOption: Record<string,any>,
    backTop:()=>void,
}>()
const { asideShow } = useApp()
</script>

<style lang="scss">
aside {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  padding-top: 72px;
  background-color: var(--color-background);
  border-left: 1px solid var(--color-border);

  form {
    width: 100%;
    height: 100%;
    padding: 20px;

    p {
      margin: 0;
    }
  }
}
</style>
